<div style="margin-top:30px; "></div>
<div class="container mapping">

	<div class="row">
		<div class="col-xs-12">
			<ol class="breadcrumb">
				<li><a href="#">首页</a></li>
				<li><a href="#/user/device">我的设备</a></li>
				<li class="active">设备详情</li>
			</ol>
		</div>
	</div>

	<div class="row" style="margin-top: 10px;">
		<div class="col-sm-9">
			<div class="row">
				<div class="col-xs-3">
					<div class="item-server">
						<i class="fa fa-server item-icon"></i>
						<span class="item-status label-success" ng-if="deviceInfo.status == 1"></span>
						<span class="item-status label-default" ng-if="deviceInfo.status != 1"></span>
					</div>
				</div>
				<div class="col-xs-9" >
					<div class="row">
						<div class="col-sm-6 ">别名：{{deviceInfo.name}}</div>
						<div class="col-sm-6 ">编码：{{deviceInfo.deviceNo}}</div>
					</div>
					<div class="row">
						<div class="col-sm-6">地址：{{deviceInfo.intranetIp}}</div>
						<div class="col-sm-6">MAC：{{deviceInfo.macAddr}}</div>
					</div>
					<div class="row">
						<div class="col-sm-6">版本：{{deviceInfo.clientVersion}}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-sm-3">
			<a class="btn btn-default" ng-click="delDevice(deviceInfo)">解绑设备</a>
			<a class="btn btn-default" ng-click="editDevice(deviceInfo)">编辑设备</a>
<!-- 			<a href="#/user/device/{{deviceInfo.id}}/mapping/1/log" class="btn btn-default">实时日志</a> -->
			<a class="btn btn-default" ng-click="sendMigicWolDevice(deviceInfo)">网络唤醒</a>
			<a class="btn btn-default" ng-click="openDeviceDoorDialog(deviceInfo)">任意门</a>
<!-- 			<a class="btn btn-default" ng-click="openDeviceProxyDialog(deviceInfo)">内网代理</a> -->
		</div>
	</div>

	<hr>

	<div class="row ">
		<div class="col-xs-3">
			<div class="mapping-feature-item">
				<h5 ng-click="switchLineDialog()">线路</h5>
				<p>(<span ng-bind="deviceInfo.lineName"></span>)</p>
			</div>
		</div>
		<div class="col-xs-3">
			<div class="mapping-feature-item">
				<h5>宽带</h5>
				<p>{{deviceInfo.broadband}}MB</p>
			</div>
		</div>
		<div class="col-xs-3">
			<div class="mapping-feature-item">
				<h5>域名</h5>
				<p>{{features.domainCount}}个</p>
			</div>
		</div>
		<div class="col-xs-3">
			<div class="mapping-feature-item">
				<h5>端口</h5>
				<p>{{features.portCount}}个</p>
			</div>
		</div>
	</div>


	<hr>

	<!-- 端口映射 -->
	<div class="row">
		<div class="col-xs-10">
			<blockquote>
				<p>端口映射</p>
			</blockquote>
		</div>
		<div class="col-xs-2">
			<a class="btn btn-default" ng-click="bindDomainDialog(deviceInfo, 1)">绑定端口</a>
		</div>
	</div>
	<div class="row">
	  <div class="col-xs-12">
		  <table class="table table-hover">
			  <thead>
			  <tr>
				  <th width=60>序号</th>
				  <th>协议地址</th>
				  <th>内网地址</th>
				  <th>今日流量</th>
				  <th>状态</th>
				  <th>备注</th>
				  <th width="200">操作</th>
			  </tr>
			  </thead>
			  <tbody>
			  <tr ng-repeat="item in portList">
				  <td>{{$index+1}}</td>
				  <td>{{item.domain}}</td>
				  <td>
					  <span ng-if="item.protocol == 2">tcp://{{item.host}}:{{item.port}}</span>
					  <span ng-if="item.protocol == 5">udp://{{item.host}}:{{item.port}}</span>
				  </td>
				  <td>{{item.todayFlow}}</td>
				  <td>
					  <span class="label label-success" ng-if="item.status == 1">启用</span>
					  <span class="" ng-if="item.status != 1"> - </span>
				  </td>
				  <td>{{item.description}}</td>
				  <td>

					  <a ng-click="addMapping(item, 1)" class="btn btn-info">编辑</a>
					  <a ng-click="delMapping(item.id, $index)" class="btn btn-default">解绑</a>
				  </td>
			  </tr>
			  </tbody>
		  </table>
	  </div>

	</div>
	<!-- 域名映射 -->
	<div class="row">
		<div class="col-xs-10">
			<blockquote>
				<p>域名映射</p>
			</blockquote>
		</div>
		<div class="col-xs-2">
			<a class="btn btn-default" ng-click="bindDomainDialog(deviceInfo, 2)">绑定域名</a>
		</div>
	</div>
	<div class="row">
	  <div class="col-xs-12">
		  <table class="table table-hover">
			  <thead>
			  <tr>
				  <th width=60>序号</th>
				  <th>外网地址</th>
				  <th>内网地址</th>
				  <th>今日流量</th>
				  <th>状态</th>
				  <th>备注</th>
				  <th width="200">操作</th>
			  </tr>
			  </thead>
			  <tbody>
			  <tr ng-repeat="item in domainList">
				  <td>{{$index+1}}</td>
				  <td>
					  <a target="_blank" href="{{item.protocol | showProtocol}}://{{item.domain}}">
					  {{item.protocol | showProtocol}}://{{item.domain}}
					  </a>
				  </td>
				  <td>
					  <span ng-if="item.protocol == 1 || item.protocol == 3 || item.protocol == 4 ">{{item.host}}:{{item.port}}</span>
				  </td>
				  <td>{{item.todayFlow}}</td>
				  <td>
					  <span class="label label-success" ng-if="item.status == 1">启用</span>
					  <span class="" ng-if="item.status != 1"> - </span>
				  </td>
				  <td>{{item.description}}</td>
				  <td>
					  <a ng-click="addMapping(item,2)" class="btn btn-info">编辑</a>
					  <a ng-click="delMapping(item.id, $index)" class="btn btn-default">解绑</a>
				  </td>
			  </tr>
			  </tbody>
		  </table>

	  </div>

	</div>
</div>




<!-- 编辑端口弹出框 -->
<div id="addMapping" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">编辑端口映射</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">

					<div class="form-group">
						<label for="b" class="col-sm-2 control-label">协议</label>
						<div class="col-sm-6">
							<select class="form-control" ng-model="entity.protocol" >
								<option value="1" ng-if="entity.type == 2">HTTP</option>
								<option value="3" ng-if="entity.type == 2">HTTPS</option>
								<option value="4" ng-if="entity.type == 2">HTTP/HTTPS</option>
								<option value="2" ng-if="entity.type == 1">TCP</option>
								<option value="5" ng-if="entity.type == 1">UDP</option>
							</select>
						</div>
						<div class="col-sm-4"></div>
					</div>
                    <div class="form-group" ng-show="entity.protocol == 1 || entity.protocol == 3">
                        <label for="b" class="col-sm-2 control-label">自定义域名</label>
                        <div class="col-sm-6">
                            <div>
                                <input ng-model="entity.hostname" type="text" class="form-control"
                                        ng-show="entity.id"  >
                                <input ng-model="entity.hostname" type="text" class="form-control"
                                       ng-show="!entity.id">
                            </div>
                        </div>
                        <div class="col-sm-4"></div>
                    </div>
                    <div class="form-group" >
                        <label for="b" class="col-sm-2 control-label" >平台域名</label>
                        <div class="col-sm-6">
                            <div>
                                <input ng-model="entity.domain" type="text" class="form-control"
                                        ng-show="entity.id"  readonly>
                                <input ng-model="entity.domain" type="text" class="form-control"
                                       ng-show="!entity.id" readonly>
                            </div>
                        </div>
                        <div class="col-sm-4"></div>
                    </div>
					<div class="form-group">
						<label for="b" class="col-sm-2 control-label">内网Host</label>
						<div class="col-sm-6">
							<input type="text" ng-model="entity.host"  class="form-control" placeholder="">
						</div>
                        <div class="col-sm-4"></div>
					</div>
					<div class="form-group">
						<label for="b" class="col-sm-2 control-label">Host端口</label>
						<div class="col-sm-6">
							<input type="number" ng-model="entity.port"  class="form-control" id="b" placeholder="">
						</div>
						<div class="col-sm-4"></div>
					</div>
					<div class="form-group" ng-show="entity.protocol == 111 ">
						<label for="b" class="col-sm-2 control-label">远端端口</label>
						<div class="col-sm-6">
							<input type="number" ng-model="entity.remotePort" readonly class="form-control" id="" placeholder="">
						</div>
						<div class="col-sm-4"></div>
					</div>
					<div class="form-group" ng-show="entity.protocol == 1 || entity.protocol == 3 || entity.protocol == 4">
						<label for="b" class="col-sm-2 control-label">简单认证</label>
						<div class="col-sm-6">
							<input type="text" ng-model="entity.auth"  class="form-control" placeholder="user:password">
						</div>
						<div class="col-sm-4"></div>
					</div>
					<div class="form-group">
						<label for="b" class="col-sm-2 control-label">备注</label>
						<div class="col-sm-6">
                            <textarea class="form-control" ng-model="entity.description" rows="3"></textarea>
						</div>
                        <div class="col-sm-4"></div>
					</div>
                    <div class="form-group">
                        <label for="stautsCheckbox" class="col-sm-2 control-label" >状态</label>
                        <div class="col-sm-10">
                            <div class="switch">
                                <input id="stautsCheckbox" type="checkbox" checked />
                            </div>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <a ng-click="save()" class="btn btn-default">保 存</a>
                <a ng-click="exit()"  class="btn btn-default">取消</a>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->





<!-- 绑定域名弹框 -->
<div id="bindDomainDialog" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">绑定域名/端口</h4>
			</div>
			<div class="modal-body">

				<form class="form-horizontal">
					<div class="form-group">
						<label class="col-sm-2 control-label">域名/端口</label>
						<div class="col-sm-6">
							<select class="form-control" ng-model="selectDomainId" ng-options="item.id as item.domain for item in domainNoBindList">

							</select>
						</div>
						<div class="col-sm-4">

						</div>
					</div>
				</form>
                <p>
                </p>
			</div>
			<div class="modal-footer">
                <a href="#/user/domain/buy" class="btn btn-info">没有？去购买资源</a>
				<a ng-click="deviceBindDomain()" class="btn btn-success">确认绑定</a>
				<a ng-click="closeBindDomain()"  class="btn btn-default">取消</a>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->



<!-- 切换线路弹框 -->
<div id="switchLineDialog" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">切换通道线路</h4>
			</div>
			<div class="modal-body">

				<form class="form-horizontal">
					<div class="form-group">
						<label class="col-sm-2 control-label">通道</label>
						<div class="col-sm-8">
							<select class="form-control" ng-model="selectTunnelId" ng-options="item.id as item.name+'('+item.broadband+'MB) '+item.serverAddr for item in list">

							</select>
							<br/>
							<br/>
							<p>注意：切换通道线路需要设备没有绑定域名</p>
						</div>
					</div>
				</form>

			</div>
			<div class="modal-footer">
				<a ng-click="switchLine()" class="btn btn-default">确认切换</a>
				<a ng-click="closeSwitchLine()"  class="btn btn-default">取消</a>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!-- 删除弹出框确认 -->
<div id="delDevice" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">消息提示</h4>
			</div>
			<div class="modal-body">
				确定要解绑该设备？
			</div>
			<div class="modal-footer">
				<a ng-click="confirmDeleteDevice()" class="btn btn-default">确 定</a>
				<a class="btn btn-default" data-dismiss="modal">取 消</a>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->






<!-- 编辑弹出框 -->
<div id="editDevice" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">编辑设备</h4>
			</div>
			<div class="modal-body">

				<form class="form-horizontal">
					<div class="form-group">
						<label for="deviceName" class="col-sm-2 control-label">设备名称</label>
						<div class="col-sm-6">
							<input id="deviceName" type="text" ng-model="deviceUpdate.name" class="form-control" placeholder="名称">
						</div>
						<div class="col-sm-4">

						</div>
					</div>
					<div class="form-group">
						<label for="b" class="col-sm-2 control-label">设备标识</label>
						<div class="col-sm-6">
							<input type="text" ng-model="deviceInfo.deviceNo"  class="form-control"   placeholder="设备设备标识" readonly>
						</div>

						<div class="col-sm-4">
							<!--<span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>-->
						</div>
					</div>
					<div class="form-group">
						<label for="d" class="col-sm-2 control-label">设备IP</label>
						<div class="col-sm-6">
							<input type="text" ng-model="deviceInfo.intranetIp" ng-readonly=""  class="form-control"  id="d" placeholder="设备无IP" readonly>
						</div>

						<div class="col-sm-4">
							<!--<span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>-->
						</div>
					</div>

					<div class="form-group">
						<label for="c" class="col-sm-2 control-label">创建时间</label>
						<div class="col-sm-6">
							<input type="text" ng-model="deviceInfo.createTimeStr"  class="form-control" id="c" readonly>
						</div>
						<div class="col-sm-4"></div>
					</div>

				</form>

			</div>
			<div class="modal-footer">
				<a ng-click="saveDevice()" class="btn btn-default">保 存</a>
				<a ng-click="exitDevice()"  class="btn btn-default">取 消</a>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->






<!-- 任意门弹框 -->
<div id="deviceDoorDialog" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">开启任意门</h4>
			</div>
			<div class="modal-body">
                <p>注意：开启后使用完毕及时关闭。</p>
				<form class="form-horizontal">
					<div class="form-group">
						<label class="col-sm-2 control-label">域名</label>
						<div class="col-sm-6">
							<select class="form-control" ng-model="deviceDoor.domainId" ng-options="item.id as item.domain for item in domainNoBindList">
							</select>
						</div>
						<div class="col-sm-4">
						</div>
					</div>
					<div class="form-group">
						<label for="deviceName" class="col-sm-2 control-label">本地路径</label>
						<div class="col-sm-6">
							<input type="text" ng-model="deviceDoor.localPath" class="form-control" placeholder="D://">
						</div>
						<div class="col-sm-4">

						</div>
					</div>
                    <div class="form-group">
                        <label for="deviceDoorEnableCheckbox" class="col-sm-2 control-label" >状态</label>
                        <div class="col-sm-10">
                            <div class="switch">
                                <input id="deviceDoorEnableCheckbox" type="checkbox" checked />
                            </div>
                        </div>
                    </div>
				</form>
			</div>
			<div class="modal-footer">
				<a ng-click="submitDeviceDoor()" class="btn btn-default">确认绑定</a>
				<a ng-click="closeDeviceDoorDialog()"  class="btn btn-default">取消</a>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!-- 内网代理 弹框 -->
<div id="deviceProxyDialog" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">开启内网代理</h4>
			</div>
			<div class="modal-body">
                <p>注意：外部端口占未启动自动绑定，还请手动映射。</p>
				<form class="form-horizontal">
					<div class="form-group">
						<label class="col-sm-2 control-label">外部端口</label>
						<div class="col-sm-6">
							<select class="form-control" ng-model="deviceProxy.domainId" ng-options="item.id as item.domain for item in domainNoBindList">

							</select>
						</div>
						<div class="col-sm-4">

						</div>
					</div>
					<div class="form-group">
						<label for="deviceName" class="col-sm-2 control-label">本地端口</label>
						<div class="col-sm-6">
							<input type="text" ng-model="deviceProxy.deviceProxyPort" class="form-control" placeholder="3000">
						</div>
						<div class="col-sm-4">

						</div>
					</div>
                    <div class="form-group">
                        <label for="deviceProxyEnableCheckbox" class="col-sm-2 control-label" >状态</label>
                        <div class="col-sm-10">
                            <div class="switch">
                                <input id="deviceProxyEnableCheckbox" type="checkbox" checked />
                            </div>
                        </div>
                    </div>



				</form>

			</div>
			<div class="modal-footer">
				<a ng-click="submitDeviceProxy()" class="btn btn-default">提交代理</a>
				<a ng-click="closeDeviceProxyDialog()"  class="btn btn-default">取消</a>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->